.account_login {
    padding: 0 var(--m12);
    height: 100%;
    transition: filter 0.1s;


    .top_content {
        .logo {
            padding-top: 15.466vw;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            img {
                width: 14.9333vw;
                height: 19.7333vw;
            }

            .name {
                margin-top: 1.3333vw;
                color: var(--main-text);
                font-weight: 800;
                font-size: 4.8vw;
            }

            margin-bottom: 8.5333vw;
        }

        .title {
            font-weight: 500;
            font-size: 3.4667vw;
            text-align: center;
            font-family: Montserrat-Medium;
            color: var(--main-text);
        }

        .sign_content {
            margin-top: 4.2666vw;
            min-height: 26.666vw;
            display: flex;
            justify-content: center;

            .recommend_login {
                width: 13.15vw;
                height: 13.15vw;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 2.666vw;
                background-color: rgba(255, 255, 255, .5);
                border-radius: 50%;
                cursor: pointer;
            
                img {
                    width: 8.533vw;
                    height: 8.533vw;
                }
            }


        }

    }

    .continued {
        .logo {
            display: flex;
            padding-top: var(--m12);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            img {
                width: 8.5333vw;
                height: 8.5333vw;
                margin-right: 1.6vw;
            }

            .name {
                font-weight: 700;
                font-size: 5.8667vw;
                color: var(--main-text);
            }

            margin-bottom: 14.66vw;
        }

        .c_title {
            font-weight: 500;
            font-size: 4.5333vw;
            text-align: center;
            font-family: Montserrat-Medium;
            color: var(--main-text);
        }

        .avatar {
            margin-top: 6.4vw;
            margin-bottom: 19.2vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                cursor: pointer;
                height: 19.2vw;
            }

            .nick {
                margin-top: 1.0667vw;
                font-weight: 500;
                font-size: 3.4667vw;
                /* identical to box height, or 169% */

                display: flex;
                align-items: center;
                text-align: center;

                /* Black */
                font-family: Montserrat-Regular;
                color: #59595F;
            }
        }

    }



    .split_line {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        &::before,
        &::after {
            margin-right: 1.6vw;
            content: '';
            width: 21.3333vw;
            height: 1px;
            background: linear-gradient(90deg, rgba(165, 165, 173, 0) 0%, #A5A5AD 75.52%);
            left: 7.7333vw;
            top: 2.4667vw;
        }

        &::after {
            margin-left: 1.6vw;
            transform: rotate(180deg);
        }

        .text {
            text-align: center;
            display: block;
            height: 5.3333vw;
            font-weight: 500;
            font-size: 2.6667vw;
            /* identical to box height, or 200% */

            display: flex;
            align-items: center;
            text-align: center;

            /* 淡灰 */

            color: #A5A5AD;
        }
    }

    .other {
        width: fit-content;
        margin: var(--m12) auto 6.4vw;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .other_item {
            width: 9.6vw;
            height: 9.6vw;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 2.1333vw;
            background-color: #fff;
            border: .2667vw solid var(--input-border);
            border-radius: 50%;
            cursor: pointer;

            img {
                width: 6.4vw;
                height: 6.4vw;
            }
        }

        .more {
            img {
                width: 7.4667vw;
                height: 7.4667vw;
            }
        }
    }

    .temp {
        margin-top: 20.5333vw !important;
        margin-bottom: 33.8666vw !important;
    }


}


.page_blur {
    filter: blur(5PX);

}

.privacy {
    display: flex;
    margin: 6.4vw auto 0;
    position: relative;
    align-items: center;
    width: 100%;
    .agree {
        display: none !important;
        position: absolute;
        background-size: cover;
        min-height: 8vw;
        top: -7.4667vw;
        left: -1.1333vw;
        display: flex;
        justify-content: center;
        font-size: 2.666vw;
        font-family: Montserrat-Light;
        font-weight: 500;
        color: #ffffff;
    }

    .checkContent {
        display: inline-flex;
        height: 4.2667vw;
        min-width: 4.2667vw;
        justify-content: center;
        align-items: center;

        .check {
            width: 3.7333vw;
            height: 3.7333vw;
        }
    }

    .policyText {
        margin: 0  var(--m40);
        text-align: center;
        font-family: Montserrat-Light;
        font-size: var(--m10);
        font-weight: 400;
        color: #7E8189;
    }

    .policy {
        cursor: pointer;
        color: #4F48E2;
        font-family: Montserrat-Regular;
        text-decoration: underline;
    }

}


.drawer {
    z-index: 1300;

    :global {
        .ona_mask {
            background: var(--mask-bg) !important;

            backdrop-filter: blur(1.5PX);
        }
    }


    .drawer_content {
        background-color: var(--drawer-bg);
        backdrop-filter: blur(12PX);
        padding: 7.4667vw 5.3333vw 8.8vw;
        position: relative;
        border-radius: 4.2667vw 4.2667vw 0 0;
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.7);



        .v {
            width: 8.5333vw;
            height: .8vw;
            border-radius: 1.0667vw;
            background: var(--drawer-line);
            position: absolute;
            top: 2.1333vw;
            left: 50%;
            transform: translateX(-50%);
        }

        .title {
            font-weight: 600;
            font-size: 4.5333vw;
            position: relative;
            z-index: 1;
            /* identical to box height */


            /* Dark */

            color: var(--main-text);
        }

        .ways {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 7.7333vw 0 7.4667vw;
            position: relative;

            .wary_item {
                margin: 0 10.6667vw;

                img {
                    width: 9.6vw;
                    height: 9.6vw;

                }
            }

            &::after {
                content: '';
                display: block;
                width: 10.1333vw;
                background: var(--drawer-split-bg);
                height: .2667vw;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(90deg);
            }
        }

        .space {
            height: 8vw;
        }
    }
}


@media screen and (min-width:1280px) {
    .account_login {
        padding: 0 20.0535px;
        height: 100%;
        transition: filter 0.1s;


        .top_content {
            .logo {
                padding-top: 36px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                img {
                    width: 85.2265px;
                    height: 85.2265px;
                }

                .name {
                    margin-top: 6.2665px;
                    color: var(--main-text);
                    font-weight: 800;
                    font-size: 22.56px;
                }

                margin-bottom: 48px;
            }

            .title {
                font-size: 16.2935px;
            }

            .sign_content {
                margin-top: 24px;
                min-height: 150px;

                .recommend_login {
                    width: 72px;
                    height: 72px;
                    margin: 0 15px;
                    img {
                        width: 48px;
                        height: 48px;
                    }
                }


            }

        }

        .continued {
            .logo {
                padding-top: 15.04px;
                display: flex;
                align-items: center;

                img {
                    width: 40.1065px;
                    height: 40.1065px;
                    margin-right: 7.52px;
                }

                .name {
                    font-weight: 700;
                    font-size: 27.5735px;
                    color: var(--main-text);
                }

                margin-bottom: 50.1865px;
            }

            .c_title {
                font-weight: 500;
                font-size: 21.3065px;
                text-align: center;
                color: var(--main-text);
            }

            .avatar {
                margin-top: 30px;
                margin-bottom: 50.1735px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                img {
                    height: 108px;
                }

                .nick {
                    margin-top: 5.0135px;
                    font-weight: 500;
                    font-size: 16.2935px;
                    /* identical to box height, or 169% */

                    display: flex;
                    align-items: center;
                    text-align: center;

                    /* Black */

                    color: var(--font-color);
                }
            }

        }



        .split_line {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            &::before,
            &::after {
                margin-right: 7.52px;
                content: '';
                width: 100.2665px;
                height: 1px;
                background: linear-gradient(90deg, rgba(165, 165, 173, 0) 0%, #A5A5AD 75.52%);
                left: 36.3465px;
                top: 11.5935px;
            }

            &::after {
                margin-left: 7.52px;
                transform: rotate(180deg);
            }

            .text {
                text-align: center;
                display: block;
                height: 25.0665px;
                font-weight: 500;
                font-size: 12.5335px;
                /* identical to box height, or 200% */

                display: flex;
                align-items: center;
                text-align: center;

                /* 淡灰 */

                color: #A5A5AD;
            }
        }

        .other {
            width: fit-content;
            margin: 32.5865px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .other_item {
                width: 47.6265px;
                height: 47.6265px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 10.0265px;
                background-color: var(--btn-bg);
                backdrop-filter: blur(17.5PX);
                border: 1.2535px solid var(--input-border);
                border-radius: 50%;

                img {
                    width: 36px;
                    height: 36px;
                }
            }

            .more {
                img {
                    width: 35.0935px;
                    height: 35.0935px;
                }
            }
        }

        .temp {
            margin-top: 96.5065px !important;
            margin-bottom: 159.173px !important;
        }


    }

    .privacy {
        display: flex;
        margin: 36px auto 0;
        position: relative;

        .agree {
            display: none !important;
            position: absolute;
            background-size: cover;
            min-height: 37.6px;
            top: -35.0935px;
            left: -5.3265px;
            display: flex;
            justify-content: center;
            font-size: 12.5px;
            font-weight: 500;
            color: #ffffff;
        }

        .checkContent {
            display: inline-flex;
            height: 20.0535px;
            min-width: 20.0535px;
            justify-content: center;
            align-items: center;

            .check {
                width: 17.5465px;
                height: 17.5465px;
            }
        }

        .policyText {
            margin: 0 var(--pc30);
            font-size: var(--pc10);
        }


    }


    .drawer {
        z-index: 1300;

        :global {
            .ona_mask {
                background: var(--mask-bg) !important;

                backdrop-filter: blur(1.5PX);
            }
        }


        .drawer_content {
            background-color: var(--drawer-bg);
            backdrop-filter: blur(12PX);
            padding: 35.0935px 25.0665px 41.36px;
            position: relative;
            border-radius: 20.0535px 20.0535px 0 0;
            box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.7);



            .v {
                width: 40.1065px;
                height: 3.76px;
                border-radius: 5.0135px;
                background: var(--drawer-line);
                position: absolute;
                top: 10.0265px;
                left: 50%;
                transform: translateX(-50%);
            }

            .title {
                font-weight: 600;
                font-size: 21.3065px;
                position: relative;
                z-index: 1;
                /* identical to box height */


                /* Dark */

                color: var(--main-text);
            }

            .ways {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 36.3465px 0 35.0935px;
                position: relative;

                .wary_item {
                    margin: 0 50.1335px;

                    img {
                        width: 45.12px;
                        height: 45.12px;

                    }
                }

                &::after {
                    content: '';
                    display: block;
                    width: 47.6265px;
                    background: var(--drawer-split-bg);
                    height: 1.2535px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(90deg);
                }
            }

            .space {
                height: 37.6px;
            }
        }
    }

}